<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<meta charset="UTF-8">
<title>小叮当博客社区</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/dialog.css}">
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
body{
	font-family: "微软雅黑";
	font-size: 14px;
	background: url(/static/images/adminbj.jpg) fixed center center;
}
.logo_box{
	width: 280px;
	height: 490px;
	padding: 35px;
	color: #EEE;
	position: absolute;
	left: 50%;
	top:100px;
	margin-left: -175px;
}
.logo_box h3{
	text-align: center;
	height: 20px;
	font: 20px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei",sans-serif;
	color: #FFFFFF;
	height: 20px;
	line-height: 20px;
	padding:0 0 35px 0;
}
.forms{
	width: 280px;
	height: 485px;
}
.logon_inof{
	width: 100%;
	min-height: 450px;
	padding-top: 35px;
	position: relative;
}		
.input_outer{
	height: 46px;
	padding: 0 5px;
	margin-bottom: 20px;
	border-radius: 50px;
	position: relative;
	border: rgba(255,255,255,0.2) 2px solid !important;
}
.u_user{
	width: 25px;
	height: 25px;
	background: url(/static/images/login_ico.png);
	background-position:  -125px 0;
	position: absolute;
	margin: 12px 13px;
}
.us_uer{
	width: 25px;
	height: 25px;
	background-image: url(/static/images/login_ico.png);
	background-position: -125px -34px;
	position: absolute;
	margin: 12px 13px;
}
.l-login{
	position: absolute;
	z-index: 1;
	left: 50px;
	top: 0;
	height: 46px;
	font: 14px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei";
	line-height: 46px;
}
label{
	color: rgb(255, 255, 255);
	display: block;
}
.text{
	width: 220px;
	height: 46px;
	outline: none;
	display: inline-block;
	font: 14px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei";
	margin-left: 50px;
	border: none;
	background: none;
	line-height: 46px;
}
/*///*/
.mb2{
	margin-bottom: 20px
}
.mb2 a{
	text-decoration: none;
	outline: none;
}
.submit {
	padding: 15px;
	margin-top: 20px;
	display: block;
}
.act-but{
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 20px;
	border-radius: 50px;
	background: #0096e6;
}
/*////*/
.check{
	width: 280px;
	height: 22px;
}
.clearfix::before{
	content: "";
	display: table;
}
.clearfix::after{
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}
.login-rm{
	float: left;
}
.login-fgetpwd {
	float: right;
}
.check{
	width: 18px;
	height: 18px;
	background: #fff;
	border: 1px solid #e5e6e7;
	margin: 0 5px 0 0;
	border-radius: 2px;
}
.check-ok{
	background-position: -128px -70px;
	width: 18px;
	height: 18px;
	display: inline-block;
	border: 1px solid #e5e6e7;
	margin: 0 5px 0 0;
	border-radius: 2px;
	vertical-align: middle
}
.checkbox{
	vertical-align: middle;
	margin: 0 5px 0 0;
}

/*=====*/
/*其他登录口*/
.logins{
width: 280px;
height: 27px;
line-height: 27px;
float:left;
padding-bottom: 30px;
}

.wx img{
	width: 16px;
	height: 16px;
	float: left;
	line-height: 27px;
	text-align: center;
}
/*////*/
.sas{
	width: 280px;
	height: 18px;
	float: left;
	color: #FFFFFF;
	text-align: center;
	font-size: 16px;
	line-height: 16px;
	margin-bottom: 50px;
}
.sas a{
	width: 280px;
	height: 18px;
	color: #FFFFFF;
	text-align: center;
	line-height: 18px;
	text-decoration: none;
}
input:-webkit-autofill{
	BACKGROUND-COLOR: rgba(0,0,0,0);
	-webkit-box-shadow:0 0 0 1000px white inset;

}
</style>
</head>
<body>

<script th:src="@{/static/js/jquery-1.7.2.min.js}" type="text/javascript"></script>

<div class="logo_box">
	<h3>小叮当博客欢迎你</h3>
	<form action="/admin/login" id="form" name="f" method="post">
		<div class="input_outer">
			<span class="u_user"></span>
			<input name="username" id="username"   class="text" placeholder="请输入用户名" style="background-color:rgba(0,0,0,0); color: #FFFFFF !important" type="text">
		</div>
		<div class="input_outer">
			<span class="us_uer"></span>
			<input name="password" id="password"   class="text" style="background-color:rgba(0,0,0,0);color: #FFFFFF !important; position:absolute; z-index:100;"  placeholder="请输入密码" type="password">
		</div>
       <div style="clear:both; margin-left:-40px; width:350px; height:50px;">
			<div style="float:left; width: 120px" >
				<input id="yzmcode" name="yzmcode" class="text"   placeholder="验证码" style="width: 120px; padding:5px; height:30px; color:#fff; border-radius:10px; border:1px #ffffff solid;" type="text">
			</div>
		   <div style="float:right; width:150px;">
			   <img width="100" id="yzmyz" height="40" onclick="javascript:yzm(this)"  src="/admin/yzm"><span><img id="cheg" src=""/></span>
		   </div>
	   </div>
		<div class="mb2"><a class="act-but submit" id="submit" style="color: #FFFFFF">登录</a></div>

		<input name="checkbox" value="1" id="checkbox" class="checkbox" type="checkbox"><span>记住我</span>
		<a href="#" class="login-fgetpwd" style="color: #FFFFFF">忘记密码？</a>
	</form>
	<div class="logins">
	</div>
	<div class="sas">
		<a href="#" style="color: red;" ></a>
	</div>
</div>
<script th:src="@{/static/js/zepto.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/dialog.min.js}"></script>
<script>
    function yzm(obj){
        obj.src="/admin/yzm?ns="+new Date().getTime();
    }
    $(function () {
        $("#yzmcode").blur(function () {
            $.ajax({
                    type: "GET",
                    url: "/admin/code",
                    dataType: "json",
                    data: {code: this.value},
                    success: function (result) {
                        if (result == "1") {
                            $("#cheg").attr("src", "/static/images/suss.png");
                        } else {
                            $("#cheg").attr("src", "/static/images/error.png");
                        }
                    }
                }
            )
        })
        $("#submit").click(function(){
            var name=$("#username").val();
            var password=$("#password").val()
            var code=$("#yzmcode").val();
            if(name==""&&name.length<=3) {
                popup({type: 'error', msg: "账号必须大于3", delay: 2000, bg: true, clickDomCancel: true});
                $("#username").focus();
            }else{
                if(password==""&&password.length<=3) {
                    popup({type: 'error', msg: "密码必须大于3", delay: 2000, bg: true, clickDomCancel: true});
                    $("#password").focus();
                }else{
                    if(code=="") {
                        popup({type: 'error', msg: "验证码不能为空", delay: 2000, bg: true, clickDomCancel: true});
                        $("#code").focus();
                    }else{
                        var checkbox=$("#checkbox");
                        if(checkbox.is(":checked")){
                            checkbox=checkbox.val();
                        }else{
                            checkbox=0;
                        }
                        $.ajax({
                            type: "post",
                            url: "/admin/login",
                            data: {username: name, password: password, yzmcode: code,checkbox : checkbox},
                            success: function (data) {
                                if(data=="1"){
                                    location.href="/admin";
                                }else{
                                    $("#yzmyz").attr("src","/admin/yzm?ns="+new Date().getTime());
                                    popup({type: 'tip', msg: data, delay: 1500});
                                }},
                            error: function (error) {
                                popup({type: 'error', msg: "登录错误", delay: 2000, bg: true, clickDomCancel: true});
                            }
                        })
					}
				}
			}
        })
    })
</script>
</body>
</html>